<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
            <div class="logo">黑马头条</div>
            <!--
                el-menu 整个菜单组件
                :default-active 默认高亮的导航配置,对于导航项的 index,进行高亮设置
                先不设置,肯定动态设置的
                background-color 背景颜色
                text-color  导航文字颜色
                active-text-color 导航文字高亮
                el-submenu 子菜单,将来可以这跌效果
                子菜单的标题内容,可以通过title的具名插槽进行设置
                每个子菜单中,可以配置多个 el-menu-item
                el-menu-item  具体可以选中的导航项
             -->
            <el-menu
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                router
                :default-active="$router.path"
                >

                <el-menu-item index="/post-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">文章列表</span>
                </el-menu-item>

                <el-menu-item index="/post-publish">
                  <i class="el-icon-setting"></i>
                  <span slot="title">发布文章</span>
                </el-menu-item>
            </el-menu>
      </el-aside>
        <el-container>
          <el-header>
            <img :src="user.head_img | fixUrl" alt="">
            <div class="nickname">{{ user.nickname }}</div>
            <a href="javascript:;" class="logout" @click='logout'>退出</a>
          </el-header>
          <el-main>
            <!-- 嵌套路由的出口 -->
            <router-view></router-view>
          </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return { // 获取 信息
      user: JSON.parse(localStorage.getItem('user'))
    }
  },
  methods: {
    // 退出功能
    async logout () {
      try {
        await this.$confirm('你确定要退出系统吗, 是否继续?', '温馨提示', { type: 'warning' })
        // 点了确定
        this.$message.success('退出成功')
        // 删除 localstoage中的数据
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        // 跳转到登录页
        this.$router.push('/login')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  .el-container {
    height: 100%;
  }
  // 头部
  .el-header {
    background-color: #333;
    color: #fff;
    text-align: center;
    line-height: 60px;
    display: flex;
    // 水平居中
    align-items: center;
    // 水平方向居右
    justify-content: flex-end;
    img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    .nickname {
      margin: 0 10px;
    }
    .logout {
      color: #daa520
    }
  }
  // 侧边栏
  .el-aside {
    background-color: rgb(247, 188, 26);
    color: #333;
    .logo {
      height: 60px;
      line-height: 60px;
      background-color: #000;
      color: #fff;
      font-weight: 700;
      text-align: center;
    }
  }
  // 主体
  .el-main {
    background-color: #fff;
    color: #fff;
  }
}
</style>
